<template>
  <div class="page">
    <ElemHeader></ElemHeader>
    <div class="biz-tab van-hairline--bottom flex">
      <div class="line" :class="'line-left'+tabActive"></div>
      <div @click="headerSelecte(0)" class="tab-item" :class="tabActive==0?'active':''">点餐</div>
      <div @click="headerSelecte(1)" class="tab-item" :class="tabActive==1?'active':''">
        <span class="ok-inline-block padding-right-xs">评价</span>
        <span class="text-999 text-f10">4.7</span>
      </div>
      <div @click="headerSelecte(2)" class="tab-item" :class="tabActive==2?'active':''">
        <span class="ok-inline-block padding-right-xs">商家</span>
        <span class="text-999 text-f10">故事</span>
      </div>
    </div>
    <Goods></Goods>
  </div>
</template>

<script type="es6">
import Goods from "@/components/elem/Goods.vue"
import ElemHeader from "@/components/elem/ElemHeader.vue"

export default {
  inject: ['reload'], /**reload(callback);对应provide中的数组值*/
  name: "elem",
  components: {Goods, ElemHeader},
  data() {
    return {
      tabActive: 0
    }
  },
  mounted() {

  },
  methods: {
    headerSelecte(active) {
      this.tabActive = active;
    },
  }
}
</script>

<style lang="scss" scoped>
$--main: #1989fa;
.page {
  width: 100vw;
  min-height: 100vh;
  background: #FFFFFF;
}

.biz-tab {
  margin: 0;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  height: 36px;
  position: relative;

  .line {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: $--main;
    left: 15px;
    bottom: 0;
    position: absolute;
    transition: left .5s;

    &.line-left1 {
      left: 85px;
    }

    &.line-left2 {
      left: 155px;
    }
  }

  .tab-item {
    height: 32px;
    line-height: 32px;
    width: 70px;
    font-size: 16px;
    color: black;
    transition: all .1s;

    &.active {
      font-weight: bolder;
    }
  }
}

</style>